import React,{useEffect} from 'react'
import {RouteComponentProps,useParams} from 'react-router-dom'
import {Col,Row,Typography,Carousel,Image,Spin,Button} from 'antd'
import { DatePicker, Space, Divider,Menu,Anchor,Layout} from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import './detail.css'
import DetailTable from "../../components/DetailTable/DetailTable";
import MyComment from "../../components/MyComment/MyComment";
import {commentMockData} from './mockup'
import {useSelector,useDispatch} from 'react-redux'
import {RootState} from "../../redux/store/store";
import {getProductDetail} from "../../redux/Detailitem/slice";
import {addBuycar} from "../../redux/BuyCar/slice";
import MyHeaderFunc from "../../components/MyHeader/MyHeaderFunc";
import {nanoid} from 'nanoid'
const IconFont = createFromIconfontCN({
    scriptUrl: [
        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
    ],
});
const { RangePicker } = DatePicker;
const { Link } = Anchor;
interface MatchParams{
    touristid:string
}
export const Detail:React.FC<RouteComponentProps<MatchParams> >=(props)=>{
    const dispatch=useDispatch();
    const {touristid}=useParams<MatchParams>();
    const isloading=useSelector((state:RootState)=>state.detailitem.isloading)
    const error=useSelector((state:RootState)=>state.detailitem.error)
    const productitem=useSelector((state:RootState)=>state.detailitem.detailitem)
    const buycar=useSelector((state:RootState)=>state.buycar.buycarproducts)
    const token=useSelector((state:RootState)=>state.userlogin.token)
     useEffect(()=> {
         dispatch(getProductDetail(touristid));
     },[])
    const addcar=(token:string|null,productid:string)=>{
        return ()=>{
            if(token){
                dispatch(addBuycar({token:token,productid:productid}));
            }
            else{
                alert('请先登陆！');
            }
        };
    }
    if(isloading){
        return (<Spin style={{width:"100%",height:"100vh"}}></Spin>)
    }else if(error){
        return (<Typography.Title type="danger">网络出错</Typography.Title>)
    }
    return(
        <div className="detailpage">
            <MyHeaderFunc></MyHeaderFunc>
            <Row>
                <Col className="introduce" span={13}>
                    <Typography.Title level={4}>{productitem.title}</Typography.Title>
                    <Typography.Text>{productitem.description}</Typography.Text>
                    <div className="title">
                        <span className="out">¥<span className="red">{productitem.originalPrice}</span>/人起</span>
                        <span className="out"><span className="red">{productitem.rating}</span>分</span>
                        <Button  className="out" type="primary" onClick={addcar(token,touristid)}><IconFont type="icon-shoppingcart" />加入购物车</Button>
                    </div>
                    <Carousel className="detailcarousel" autoplay slidesToShow={3}>
                        {
                            productitem.touristRoutePictures.map((item:any)=>{
                                return (<Image height={150} src={item.url} key={nanoid()}></Image>)
                            })
                        }
                    </Carousel>
                    <DetailTable name={productitem.title}
                                 price={productitem.price}
                                 discount={productitem.discountPresent}
                                 rate={productitem.rating}
                                 sale={"无优惠券可领"}
                                 originalPrice={productitem.originalPrice}
                    ></DetailTable>
                </Col>
                <Col span={9}>
                    <RangePicker className="date" open={true}></RangePicker>
                </Col>
            </Row>
            {/*锚点菜单*/}
            {/*<Menu mode={"horizontal"} >*/}
            <div className="stickytabbar">
                <Anchor affix={false}>
                    <Menu className="detailtabbar" mode="horizontal">
                        <Menu.Item className="menuitem" key="features">
                            <Link href="#features" title="产品特色"></Link>
                        </Menu.Item>
                        <Menu.Item className="menuitem" key="fees">
                            <Link href="#fees" title="旅行费用"></Link>
                        </Menu.Item>
                        <Menu.Item className="menuitem" key="notes">
                            <Link href="#notes" title="预订须知"></Link>
                        </Menu.Item>
                        <Menu.Item className="menuitem" key="comment">
                            <Link href="#comment" title="客户评价"></Link>
                        </Menu.Item>
                    </Menu>
                </Anchor>
            </div>
            {/*</Menu>*/}
            <div className="features" id="features">
                <Divider orientation="center">
                    <Typography.Title level={3}>产品特色</Typography.Title>
                </Divider>
                <div dangerouslySetInnerHTML={{__html:productitem.features}}>
                </div>
            </div>
            <div className="fees" id="fees">
                <Divider orientation="center">
                    <Typography.Title level={3}>费用</Typography.Title>
                </Divider>
                <div dangerouslySetInnerHTML={{__html:productitem.notes}}>
                </div>
            </div>
            <div className="notes" id="notes">
                <Divider orientation="center">
                    <Typography.Title level={3}>预订须知</Typography.Title>
                </Divider>
                <div dangerouslySetInnerHTML={{__html:productitem.notes}}>
                </div>
            </div>
            <div id="comment">
                <MyComment data={commentMockData}></MyComment>
            </div>
        </div>
    )
}